<!--  -->
<template>
  <div class="synthesis">
    <div v-if="videolist.length>0">
      <h3>
        医生视频
        <a href="https://m.myzx.cn/search/1" class="fr">查看更多 ></a>
      </h3>
      <div class="videoBox">
        <a :href="item.preview" v-for="(item,index) in videolist" :key="index">
          <img
            :src="'https://img.myzx.cn/video/'+item.image"
            onerror="this.src='https://img.myzx.cn/video/mysource/image/20200828/5f4869c55c8d2.png'"
            alt
          />
          <p class="exflow2">{{item.title}}</p>
        </a>
      </div>
    </div>
    <div v-if="voicelist.length>0">  
      <h3>
        医生音频
        <a href="https://m.myzx.cn/search/4" class="fr">查看更多 ></a>
      </h3>
      <ul class="audioCard">
        <li v-for="(item,index) in voicelist" :key="index">
          <p class="exflow">{{item.title}}</p>
          <span>
            <span class="noaudio" v-if="!isShow">暂无音频资源</span>
            <span class="audio" v-if="isShow">
              <i class="right-play play" :class="'play' + index" @click="play(index)"></i>
              <span
                class="audio-length-current"
                ref="audioCurTime"
              >{{parseInt(item.currentTime/60)>=10?parseInt(item.currentTime/60) : '0'+ parseInt(item.currentTime/60)}}:{{item.currentTime%60>=10?item.currentTime%60:'0'+ item.currentTime%60}}</span>
              <span class="pross">
                <span :class="'pross_line' + index" class="pross_line"></span>
                <span :class="'pross_spot' + index" class="pross_spot"></span>
              </span>
              <span>{{parseInt(item.duration/60)>=10?parseInt(item.duration/60) : '0'+ parseInt(item.duration/60)}}:{{item.duration%60>=10?item.duration%60:'0'+ item.duration%60}}</span>
              <audio :class="'audio' + index" controls="controls" hidden="true">
                <source :src="'https://video.myzx.cn/'+item.url" :type="sourceType" />
              </audio>
            </span>
          </span>
        </li>
      </ul>
    </div>
    <div v-if="quelist.length>0">  
      <h3>
        医生问答
        <a href="https://m.myzx.cn/search/2" class="fr">查看更多 ></a>
      </h3>
      <div class="faqsCard">
        <a :href="item.preview" v-for="(item,index) in quelist" :key="index">
          <div>
            <b class="fl">问：</b>
            <p class="exflow">{{item.title}}</p>
          </div>
          <div>
            <b class="fl">答：</b>
            <p class="exflow3">{{item.answer}}</p>
          </div>
        </a>
      </div>
    </div>
    <div v-if="articlelist.length>0">  
      <h3>
        医生文章
        <a href="https://m.myzx.cn/search/3" class="fr">查看更多 ></a>
      </h3>
      <div class="articleCard">
        <a :href="item.preview" v-for="(item,index) in articlelist" :key="index">
          <h4>{{item.title}}</h4>
          <p class="exflow3">{{item.description}}</p>
        </a>
      </div>
    </div>
    <dl class="masterless" align="center" v-show="datashow">
      <dt>
        <img src="../assets/none.png" alt />
      </dt>
      <dd>还没有任何内容哦～</dd>
    </dl>
  </div>
</template>

<script>
import { disease } from "../api/captch";
export default {
  props: {
    src: {
      type: String,
      default: "http://music.163.com/song/media/outer/url?id=82932.mp3"
    },
    sourceType: {
      type: String,
      default: "audio/mp3"
    },
    index: {
      type: Number,
      default: 0
    },
    longTime: {
      type: [Number, String],
      default: ""
    },
    doctor_id: String,
    disease_id: Number
  },
  computed: {
    isShow: {
      get() {
        if (this.src === "" || this.src == null) {
          return false;
        } else {
          return true;
        }
      },
      set() {}
    }
  },
  created() {
    this._disease();
  },
  data() {
    return {
      videolist: {},
      voicelist: {},
      quelist: {},
      articlelist: {},
      datashow:false
    };
  },
  beforeDestroy() {
    clearInterval(this.tag);
  },
  methods: {
    // 音频播放
    play(index) {
      let that = this;
      console.log(index);
      // 切换图表状态
      for (let i = 0; i < that.voicelist.length; i++) {
        if (i != index) {
          var objs = document.getElementsByClassName("play" + i)[0]; // 播放图表
          var MP3s = document.getElementsByClassName("audio" + i)[0];
          MP3s.pause();
          clearInterval(this.tag);
          objs.classList.add("right-play");
          objs.classList.remove("el-icon-video-pause");

          
        }
      }
      
      const obj = document.getElementsByClassName("play" + index)[0]; // 播放图表
      const MP3 = document.getElementsByClassName("audio" + index)[0]; // 播放控件
      const pross_line = document.getElementsByClassName(
        "pross_line" + index
      )[0]; // 播放进度长度
      console.log(pross_line)
      const pross_spot = document.getElementsByClassName(
        "pross_spot" + index
      )[0]; // 播放进度点
      const pross = document.getElementsByClassName("pross")[0]; // 播放图表
      const str = obj.className;
      if (str.indexOf("el-icon-video-pause") > 0) {
        obj.classList.add("right-play");
        obj.classList.remove("el-icon-video-pause");
      } else {
        obj.classList.add("el-icon-video-pause");
        obj.classList.remove("right-play");
      }
      const sum = MP3.duration; // 总时间
      let newsTime = MP3.currentTime; // 播放时间
      console.log(newsTime);
      // 进度条长度为128px
      let addNum = 0; // 当前播放进度长度
      // 清除上次的定时器


      var cw = document.body.clientWidth ||document.documentElement.clientWidth,//屏幕宽度 
      oL,//鼠标相对于拖拽圆点的偏移距离
      //滑块宽度的一半
      cirW = pross_spot.offsetWidth/2;
      pross_spot.addEventListener('touchstart',function(e){
        var ev = e || window.event;
        var touch = ev.targetTouches[0];		
        oL = touch.clientX - pross_spot.offsetLeft - pross.offsetLeft;//鼠标相对于拖拽圆点的偏移距离		
      })
      pross_spot.addEventListener('touchmove',(event)=>{
        event.preventDefault();
        var ev = event || window.event;
        var touch = ev.targetTouches[0];
        var oLeft = touch.clientX - pross.offsetLeft - oL ; //滑块最左端距离父元素最左端的距离
        var durationWidth = oLeft + cirW;
        //拖动边界检测
        if(oLeft<-cirW){
          oLeft = -cirW;
          durationWidth = 0;
          
        }else if(oLeft>pross.offsetWidth- cirW){
          oLeft = pross.offsetWidth - cirW;
          durationWidth = pross.offsetWidth;
        }		
        console.log(oLeft,1111)
        //拖动实时改变进度条
        addNum = (parseInt(oLeft) / pross.offsetWidth).toFixed(2) * 100;
        pross_line.style.cssText = "width:" + addNum + "%";
        pross_spot.style.cssText = "left:" + addNum + "%";
        MP3.currentTime = addNum*sum;
        newsTime = MP3.currentTime;
        that.$set(that.voicelist[index], "currentTime", parseInt(newsTime));
        // durationIcon.style.left = oLeft + 'px';	
        // duration.style.width = durationWidth + 'px';
        // rate = durationWidth/progress.offsetWidth * 100;				
        // video.currentTime = (rate * total_time) / 100;
      })
      //拖动结束时的处理
      pross_spot.addEventListener('touchend', function() {
        document.removeEventListener("touchmove", function(e){
          e.preventDefault();
        });
      });
      clearInterval(this.tag);
      if (MP3.paused) {
        MP3.play();
        this.tag = setInterval(() => {
          newsTime = MP3.currentTime;
          that.$set(that.voicelist[index], "currentTime", parseInt(newsTime));
          addNum = (parseInt(newsTime) / sum).toFixed(2) * 100;
          pross_line.style.cssText = "width:" + addNum + "%";
          pross_spot.style.cssText = "left:" + addNum + "%";
          if (newsTime >= sum) {
            pross_line.style.cssText = "";
            pross_spot.style.cssText = "";
            obj.classList.add("right-play");
            obj.classList.remove("el-icon-video-pause");
            clearInterval(this.tag);
          }
        }, 500); // 监听播放进度
      } else {
        MP3.pause();
        clearInterval(this.tag);
        obj.classList.add("right-play");
        obj.classList.remove("el-icon-video-pause");
      }
    },
    //卡片疾病
    _disease() {
      disease(this.doctor_id, this.disease_id).then(res => {
        if(res.code==200){
            this.videolist = res.data.videos.list;
            this.voicelist = res.data.voices.list;
          for (let val of this.voicelist) {
            //此处为重点
            this.$set(val, "currentTime", "0");
          }
          this.quelist = res.data.questions.list;
          this.articlelist = res.data.articles.list;
          if(this.videolist==""&&this.voicelist==""&&this.quelist==""&&this.articlelist==""){
            this.datashow=true;
          }
        }else{
          this.datashow=true;
        }
      });
    }
  }
};
</script>
<style scoped>
.exflow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.exflow2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.exflow3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.synthesis {
  margin: 30px;
}
.synthesis h3 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 30px;
}
.synthesis h3 a {
  color: #999999;
  font-size: 24px;
}
.synthesis>div {
  margin-bottom: 20px;
}

.videoBox > a {
  display: inline-block;
  width: 330px;
  border-radius: 16px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  color: #333333;
  margin: 0 27px 27px 0;
}
.videoBox > a:nth-child(2n) {
  margin-right: 0;
}
.videoBox > a > img {
  width: 100%;
  height: 186px;
}
.videoBox > a > p {
  padding: 5px 20px 0;
  margin-bottom: 15px;
  height: 80px;
}
.articleCard > a,
.faqsCard > a {
  display: inline-block;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.articleCard h4 {
  font-size: 32px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 20px;
}
.faqsCard p {
  display: inline-block;
  width: 574px;
}
.faqsCard b {
  color: #333333;
}
.audioCard li {
  border-radius: 16px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  overflow: hidden;
}
.audioCard li p {
  padding: 30px;
  font-weight: bold;
}

.audio {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  padding: 30px;
  color: #fff;
  background: #007cff;
  box-sizing: border-box;
}
.audio .play {
  font-size: 20px;
  padding-right: 17px;
}
.audio .pross {
  display: inline-block;
  background: #ffffff;
  margin-right: 5px;
  width: 391px;
  height: 2px;
  position: relative;
  margin: 0 20px;
}
.audio .pross_spot {
  top: -12px;
  position: absolute;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
}
.audio .pross_line {
  position: absolute;
  background: #fff;
  height: 5px;
  left: 0;
  width: 0;
  top: -2px;
}
.audio .right-play {
  width: 27px;
  height: 36px;
  background: url(../assets/play.png) no-repeat;
  background-size: contain;
}
.audio .el-icon-video-pause {
  width: 27px;
  height: 38px;
  background: url(../assets/stop.png) no-repeat;
  background-size: contain;
}
.masterless {
  margin: 55px 0;
  font-size: 36px;
}
.masterless img {
  width: 287px;
  margin-bottom: 20px;
}
</style>